<script setup>
import ClickBox from '@/components/ClickBox.vue'

const { title, value, bg, url } = defineProps({
  title: String,
  value: String || Number,
  bg: {
    type: String,
    default: ''
  },
  url: String
})
const emit = defineEmits(['onTap'])
// 跳转页面
const goPage = () => {
  if (url !== '') {
    emit('onTap')
  }
}
</script>

<template>
  <ClickBox :off="url === ''">
    <div
      class="box-border text-#1E2226 font-din text-14px leading-14px bg-white p-16px rounded-2px"
      :class="bg === 'gray' ? 'gray' : ''"
      @click="goPage"
    >
      <div class="box-border flex justify-between items-center pb-4px">
        <span class="box-border">{{ title }}</span>
        <img
          v-if="url !== ''"
          class="box-border w-12px h-12px rotate--90"
          src="@/assets/img/icon_requestListArrow.svg"
          alt=""
        />
      </div>
      <div class="box-border text-18px leading-22px font-700">{{ value }}</div>
    </div>
  </ClickBox>
</template>

<style scoped lang="less">
.gray {
  background-image: linear-gradient(0deg, #fcfcfd52 0%, #f7f8fa 86%);
}
</style>
